<script setup>
import { getBookList } from  '@/api/book/index.js'
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const bookList = reactive({
  completeRank: [], // 完结榜
  hotRank: [], // 热榜
  newRank: [], // 新书榜
  updateRank: [] // 更新榜
})
onMounted(() => {
  Promise.all([getBookList({ completeRank: 1,  }), getBookList({ hotRank: 1 }), getBookList({ newRank: 1 }), getBookList({ updateRank: 1 })])
  .then(res => {
    bookList.completeRank = res[0].records
    bookList.hotRank = res[1].records
    bookList.newRank = res[2].records
    bookList.updateRank = res[3].records
  }
  )
})
// 进入书籍详情页
const handelBookDetail = id => {
  router.push(`/shuku/${id}`)
}
</script>
<template>
  <div class="main">
    <div class="main-container">
      <div class="loop">
        <div class="con">
          <a-carousel arrows autoplay>
            <template #prevArrow>
              <div class="custom-slick-arrow" style="left: 10px; z-index: 11">
                <LeftCircleOutlined />
              </div>
            </template>
            <template #nextArrow>
              <div class="custom-slick-arrow" style="right: 10px">
                <RightCircleOutlined />
              </div>
            </template>
            <div><img src="@/assets/l1.jpg" alt=""></div>
            <div><img src="@/assets/l2.jpg" alt=""></div>
            <div><img src="@/assets/l3.jpg" alt=""></div>
            <div><img src="@/assets/l4.jpg" alt=""></div>
          </a-carousel>
        </div>
        <div class="desc">
          <div class="title">书友立荐</div>
          <div class="info">
            <ul>
              <li><span>[言情]</span> <a href="#">《夫人混得风生水起》</a></li>
              <li><span>[异能]</span> <a href="#">《农门王妃美又飒》</a></li>
              <li><span>[都市]</span> <a href="#">《女总裁的无敌奶爸》</a></li>
              <li><span>[玄幻]</span> <a href="#">《混元帝尊》</a></li>
              <li><span>[历史]</span> <a href="#">《传闻帝少有隐疾》</a></li>
              <li><span>[仙侠]</span> <a href="#">《她和陆医生隐婚了》</a></li>
              <li><span>[奇幻]</span> <a href="#">《神医毒妃不好惹》</a></li>
              <li><span>[奇幻]</span> <a href="#">《九王妃她只想失宠》</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="banner"><img src="@/assets/banner1.png" alt=""></div>
      <div class="rank-list">
        <div class="rank-container">
          <div class="rank-header hot">
            <div class="rank-title">热度榜</div>
            <div class="rank-info">吃货文学用户近期热读的书</div>
          </div>
          <div class="rank-body">
              <div class="rank-book" v-for="(book, index) in bookList.hotRank" :key="book.id" @click="() => handelBookDetail(book.id)">
                <div class="book-cover">
                  <img :src="book.cover" alt="">
                </div>
                <div class="book-info">
                  <p> <span>{{ index + 1}}</span> {{ book.title }} </p>
                  <p>{{ book.authorName }}</p>
                </div>
              </div>
          </div>
        </div>
        <div class="rank-container">
          <div class="rank-header new">
            <div class="rank-title">新书榜</div>
            <div class="rank-info">最近受欢迎的新书</div>
          </div>
          <div class="rank-body">
              <div class="rank-book" v-for="(book, index) in bookList.newRank" :key="book.id" @click="() => handelBookDetail(book.id)">
                <div class="book-cover">
                  <img :src="book.cover" alt="">
                </div>
                <div class="book-info">
                  <p> <span>{{ index + 1}}</span> {{ book.title }} </p>
                  <p>{{ book.authorName }}</p>
                </div>
              </div>
          </div>
        </div>
      </div>
      <div class="banner"><img src="@/assets/banner2.png" alt=""></div>
      <div class="rank-list">
        <div class="rank-container">
          <div class="rank-header end">
            <div class="rank-title">完结榜</div>
            <div class="rank-info">吃货文学完结书籍最受欢迎排名</div>
          </div>
          <div class="rank-body">
              <div class="rank-book" v-for="(book, index) in bookList.completeRank" :key="book.id" @click="() => handelBookDetail(book.id)">
                <div class="book-cover">
                  <img :src="book.cover" alt="">
                </div>
                <div class="book-info">
                  <p> <span>{{ index + 1}}</span> {{ book.title }} </p>
                  <p>{{ book.authorName }}</p>
                </div>
              </div>
          </div>
        </div>
        <div class="rank-container">
          <div class="rank-header update">
            <div class="rank-title">更新榜</div>
            <div class="rank-info">最近更新热门的小说</div>
          </div>
          <div class="rank-body">
              <div class="rank-book" v-for="(book, index) in bookList.updateRank" :key="book.id" @click="() => handelBookDetail(book.id)">
                <div class="book-cover">
                  <img :src="book.cover" alt="">
                </div>
                <div class="book-info">
                  <p> <span>{{ index + 1}}</span> {{ book.title }} </p>
                  <p>{{ book.authorName }}</p>
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
.main {
  .loop {
    display: flex;
    margin-top: 30px;
    .desc {
      flex: 1;
      background: #F9F9F9;
      border-radius: 14px;
      padding: 25px 20px 15px 20px;
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
          height: 26px;
          line-height: 26px;
          margin-top: 10px;
          span {
            margin-right: 5px;
          }
        }
      }
      .title {
        font-size: 20px;
        color: #222;
        font-weight: 600;
        border-bottom: 2px solid #eee;
      }
    }
    .con {
      width: 900px;
      cursor: pointer;
      margin-right: 30px;
      .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
        width: 40px;
        height: 40px;
        font-size: 40px;
        color: #fff;
        opacity: 0.5;
        z-index: 1;
      }
      .ant-carousel :deep(.custom-slick-arrow:before) {
        display: none;
      }
      .ant-carousel :deep(.custom-slick-arrow:hover) {
        opacity: 0.7;
      }
      img {
        width: 900px;
      }
    }
  }
  .banner {
    margin-top: 20px;
    cursor: pointer;
  }
  &-container {
    width: 1200px;
    min-width: 1000px;
    margin: 0 auto;
    .rank-container {
      width: 600px;
    }
    .rank-header {
      padding: 20px 0;
      .rank-title {
        font-size: 26px;
        font-weight: 600;
      }
    }
    .hot {
      color: #F75B9A;
    }
    .new {
      color: #FF6F3C;
    }
    .end {
      color: #817CF2;
    }
    .update {
      color: #DBC79C;
    }
    .rank-body {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .rank-body-right {
        margin-left: 60px;
      }
    }
    .rank-book {
      min-width: 260px;
      display: flex;
      justify-content:space-between;
      padding: 15px 10px;
      border-top: 1px solid #ebedf1;
      border-bottom: 1px solid #ebedf1;
      &:hover {
        background:linear-gradient(to right,#ebedf1,#eee,#fff)
      }
      .book-info {
        flex: 1;
        margin-left: 20px;
        padding-top:20px;
        p:first-child {
          width: 165px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }   
        p:last-child {
          color: #858c96;
          font-size: 12px;
        }
      }
    }
    .rank-list {
      margin-top: 30px;
      display: flex;
      justify-content: space-between;
    }
    .book-cover {
      img {
        width: 64px;
        height: 92px;
      }
    }
  }
}
</style>